<template>
  <el-dialog
    title="添加项目成员"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    destroy-on-close
    append-to-body
    width="25%"
    @close="
      () => {
        $refs.form.resetFields();
      }
    "
  >
    <div class="form">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-position="left"
        label-width="80"
        size="small"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <quick-field-panel title="员工" required>
              <el-form-item prop="employee_id">
                <el-select
                  v-model="form.employee_id"
                  placeholder="请选择员工"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in emOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </quick-field-panel>
          </el-col>
          <el-col :span="12">
            <quick-field-panel title="职务" required>
              <el-form-item prop="duty">
                <el-input v-model="form.duty" clearable> </el-input>
              </el-form-item>
            </quick-field-panel>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer">
      <el-button
        type="primary"
        :loading="loading"
        size="medium"
        @click="addMember"
        >确 定</el-button
      >
      <el-button size="medium" plain @click="isShow = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
    
    <script>
import _api from "@/common/api/employee";
import _member from "@/common/api/project_member";
export default {
  data() {
    return {
      loading: false,
      isShow: false,
      form: {
        project_id: "",
        employee_id: "",
        duty: "",
      },
      rules: {
        employee_id: [
          {
            required: true,
            message: "请选择员工",
            trigger: "blur",
          },
        ],
        duty: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
      },
      condition: {
        page_index: 1,
        page_size: 999,
      },
      emOptions: [],
    };
  },
  methods: {
    showDialog(project_id) {
      this.getEmployees();
      this.form.project_id = project_id;
      this.isShow = true;
    },

    async getEmployees() {
      try {
        const result = await _api.getListAsync(this.condition);
        this.emOptions = result.data.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
      } catch {}
    },

    async addMember() {
      this.loading = true;
      try {
        await this.$refs.form.validate(async (valid) => {
          if (valid) {
            await _member.addAsync(this.form);
            this.isShow = false;
            this.$emit("added", {});
          }
        });
      } finally {
        this.loading = false;
      }
    },
  },
  mounted() {},
  computed: {},
};
</script>
    
<style lang="scss" sooped>
.avatar-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 10px 0;
}

.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader .el-upload .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.el-dialog {
  .el-dialog .el-dialog__body {
    padding: 5px 20px;
  }
}
</style>
    